<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element对象</title>
</head>

<!--
各种Element对象去网站上看
https://www.w3school.com.cn/jsref/obj_window.asp
-->

<body>
<img id="light" src="../imgs/off.gif"> <br>

<div class="cls">传智教育</div>   <br>
<div class="cls">黑马程序员</div> <br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>


</body>


<script>
    //1. getElementById：根据id属性值获取，返回一个Element对象
    let img = document.getElementById("light");
    // alert(img);
    img.src = "./imgs/on.gif";

    //2. getElementsByTagName：根据标签名称获取，返回Element对象数组
    // style:设置元素css样式
    // innerHTML：设置元素内容
    let divs = document.getElementsByTagName("div");

    for (let i = 0; i < divs.length; i++) {
        //divs[i].style.color = 'red';
        divs[i].innerHTML = "呵呵";
    }

    //3. getElementsByName：根据name属性值获取，返回Element对象数组
    let hobbys = document.getElementsByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        //alert(hobbys[i]);
        hobbys[i].checked = true;
    }

    //4. getElementsByClassName：根据class属性值获取，返回Element对象数组

    let clss = document.getElementsByClassName("cls");
    /*for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);

    }*/



</script>


</html>